<template>
  <div>
    <typeNav />
    <div class="heart container">
      <!--选项卡-->
      <div class="bread">
        <span><a href="#">全部结果</a></span>
        <ul class="tags">
          <!--分类的标签-->
          <li class="tag" v-if="searchParams.categoryName">
            <a href="">{{ searchParams.categoryName }}</a>
            <i @click="removetag">×</i>
          </li>
          <!--搜索词的标签-->
          <li class="tag" v-if="searchParams.keyword">
            <a href="">{{ searchParams.keyword }}</a>
            <i @click="removekeywordtag">×</i>
          </li>
          <!--品牌的标签-->
          <li class="tag" v-if="searchParams.trademark">
            <a href="">{{ searchParams.trademark.split(":")[1] }}</a>
            <i @click="removetrademark">×</i>
          </li>
          <!--属性的标签-->
          <li
            class="tag"
            v-for="(attrValue, index) in searchParams.props"
            :key="index"
          >
            <a href="">{{ attrValue.split(":")[1] }}</a>
            <i @click="removeAttr(index)">×</i>
          </li>
        </ul>
      </div>
      <SearchSelector @tradeMarkInfo="tradeMarkInfo" @attrInfo="attrInfo" />
      <!--排序方式-->
      <div class="sort">
        <ul>
          <li @click="changeOrder('1')">
            <a :class="{ active: isOne }"
              >综合<span
                v-show="isOne"
                :class="{ up: isup, down: isdown }"
              ></span
            ></a>
          </li>
          <li><a href="">销量</a></li>
          <li><a href="">新品</a></li>
          <li><a href="">评价</a></li>
          <li @click="changeOrder('2')">
            <a :class="{ active: isTwo }"
              >价格<span
                v-show="isTwo"
                :class="{ up: isup, down: isdown }"
              ></span
            ></a>
          </li>
        </ul>
      </div>
      <!--商品展示页面-->
      <div class="goods-list clearfix">
        <ul class="clearfix">
          <li v-for="good in goodsList" :key="good.id">
            <div class="good">
              <router-link :to="`/detail/${good.id}`">
                <img v-lazy="good.defaultImg" alt="图片加载失败"
              /></router-link>
            </div>
            <div class="price">
              <em>￥</em>
              <i>{{ good.price }}</i>
            </div>
            <div class="title">
              <a target="_blank" href="item.html" :title="good.title"
                >{{ good.title }}
              </a>
            </div>
            <div class="commit">已有<span>2000</span>人评价</div>
            <div class="buttons">
              <a class="into-car" @click="addShopCar(good.id)">加入购物车</a>
              <a href="" class="favor">收藏</a>
            </div>
          </li>
        </ul>
      </div>
      <!--页码-->
      <Pagination
        :pageNo="searchParams.pageNo"
        :pageSize="searchParams.pageSize"
        :total="total"
        :continues="3"
        @getPageNo="getPageNo"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import SearchSelector from "./SearchSelector";
export default {
  components: { SearchSelector },
  name: "Search",
  data() {
    return {
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "1:desc",
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: "",
      },
    };
  },
  beforeMount() {
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
  },
  mounted() {
    this.getData();
  },
  computed: {
    ...mapGetters(["goodsList", "skuInfo"]),
    ...mapState({
      total: (state) => {
        return state.search.searchList.total;
      },
    }),
    isOne() {
      return this.searchParams.order.indexOf("1") != -1;
    },
    isTwo() {
      return this.searchParams.order.indexOf("2") != -1;
    },
    isdown() {
      return this.searchParams.order.indexOf("desc") != -1;
    },
    isup() {
      return this.searchParams.order.indexOf("asc") != -1;
    },
  },
  methods: {
    //根据参数不同获取不同的search数据
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
    async addShopCar(goodId) {
      try {
        await this.$store.dispatch("addOrUpdateShopCart", {
          skuId: goodId,
          skuNum: 1,
        });
        sessionStorage.setItem("SKUINFO", JSON.stringify(this.skuInfo));
        this.$store.dispatch("getCartList");
        this.$router.push({
          name: "addcartsuccess",
          query: { skuNum: 1 },
        });
      } catch (error) {
        alert(error.message);
      }
    },
    //删除选项卡
    removetag() {
      this.searchParams.categoryName = undefined;
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      this.getData();
      //路由跳转，修改地址栏
      if (this.$route.params) {
        this.$router.push({ name: "search", params: this.$route.params });
      }
    },
    //删除关键字选项卡
    removekeywordtag() {
      this.searchParams.keyword = undefined;
      this.getData();
      this.$bus.$emit("clear");
      //路由跳转，修改地址栏
      if (this.$route.query) {
        this.$router.push({ name: "search", query: this.$route.query });
      }
    },
    //删除商标品牌选项卡
    removetrademark() {
      this.searchParams.trademark = undefined;
      this.getData();
    },
    //自定义事件回调
    tradeMarkInfo(tradeMark) {
      this.searchParams.trademark = `${tradeMark.tmId}:${tradeMark.tmName}`;
      this.getData();
    },
    attrInfo(attr, attrInfo) {
      let props = `${attr.attrId}:${attrInfo}:${attr.attrName}`;
      //数组去重
      if (this.searchParams.props.indexOf(props) === -1) {
        this.searchParams.props.push(props);
      }
      this.getData();
    },
    removeAttr(index) {
      this.searchParams.props.splice(index, 1);
      this.getData();
    },
    changeOrder(flag) {
      let orgflag = this.searchParams.order.split(":")[0];
      let orgSort = this.searchParams.order.split(":")[1];
      let newOrder = "";
      //如果点击的页签和现在已经标记的页签一样，则升降序取反
      if (flag === orgflag) {
        newOrder = `${orgflag}:${orgSort == "desc" ? "asc" : "desc"}`;
      } else {
        newOrder = `${flag}:desc`;
      }
      this.searchParams.order = newOrder;
      this.getData();
      console.log(
        "searchParams.order " + this.searchParams.order,
        "orgflag:" + orgflag,
        "flag:" + flag
      );
    },
    //自定义事件，获取当前是第几页
    getPageNo(pageNo) {
      this.searchParams.pageNo = pageNo;
      this.getData();
    },
  },
  watch: {
    $route(newvalue, oldvalue) {
      //清空上一次选择的影响
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      this.getData();
    },
  },
};
</script>

<style lang="css" scoped>
.container {
  min-height: 800px;
}
.container .bread {
  height: 55px;
  padding-top: 10px;
}
.container .bread span {
  float: left;
  height: 22px;
  line-height: 22px;
  padding: 3px 15px;
}
.container .bread .tags {
  padding: 3px 0 3px 0;
}
.container .bread .tags .tag {
  display: inline-block;
  height: 22px;
  margin: 0 2px;
  padding: 0px 7px;
  overflow: hidden;
  color: #000;
  background: #f7f7f7;
  line-height: 20px;
  border: 1px solid #dedede;
  overflow: hidden;
}
.tag i {
  display: inline-block;
  vertical-align: middle;
  font: 400 14px tahoma;
  cursor: pointer;
  height: 100%;
  margin-left: 10px;
  padding-bottom: 2px;
}
.tag i:hover {
  color: #e2231a;
}
/*排序方式*/
.sort {
  position: relative;
  width: 100%;
  min-height: 40px;
  background: #fbfbfb;
  border: 1px solid #e2e2e2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sort ul {
  position: absolute;
  width: 100%;
  height: 100%;
}
.sort ul li {
  float: left;
  cursor: pointer;
}
.sort ul li a {
  display: block;
  line-height: 18px;
  text-align: center;
  padding: 10px 20px;
  margin-right: 5px;
}
.sort ul li .active {
  color: white;
  background-color: #e1251b;
}
.sort ul li .up,
.sort ul li .down {
  position: relative;
}
.sort ul li .up::after,
.sort ul li .down::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -1px;
  line-height: 18px;
}
.sort ul li .up::after {
  content: "↑";
}
.sort ul li .down::after {
  content: "↓";
}
/*商品展示页*/
.goods-list {
  width: 100%;
  height: auto;
}
.goods-list ul li {
  float: left;
  width: 20%;
  height: 392px;
  margin-top: 10px;
  line-height: 28px;
}
.good {
  width: 240px;
  height: 240px;
  overflow: hidden;
}
.good img {
  width: 95%;
  height: auto;
  max-width: 95%;
  max-height: 100%;
  object-fit: cover;
}
.price {
  padding-left: 20px;
  font-size: 18px;
  color: #c81623;
  font-weight: 700;
  margin: 2px 0;
}
.price em {
  margin-right: -2px;
}
.goods-list ul li > div {
  float: left;
}
.goods-list .title {
  padding-left: 20px;
  width: 85%;
  margin-bottom: 8px;
  min-height: 38px;
  cursor: pointer;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods-list .commit {
  padding-left: 20px;
  width: 100%;
  height: 22px;
  font-size: 13px;
  color: #a7a7a7;
  overflow: hidden;
}
.goods-list .commit span {
  font-weight: 700;
  color: #ff3747;
  vertical-align: middle;
}
.buttons {
  padding-left: 20px;
}
.buttons a {
  display: inline-block;
  margin: 12px 15px 12px 0;
  min-width: 85px;
  height: 22px;
  background-color: transparent;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}
.buttons .into-car {
  border: 1px #e2231a solid;
  color: #e2231a;
  cursor: pointer;
}
.buttons .into-car:hover {
  color: white;
  background-color: #e2231a;
}
.buttons .favor {
  border: 1px #a7a7a7 solid;
  color: #a7a7a7;
}
.buttons .favor:hover {
  color: white;
  background-color: #a7a7a7;
}
</style>
